<template>
	<view class="address-wrapper">
		<view class="remind-choose">收货地址</view>
		<view class="address-list">
			<view class="item" v-for="(item,index) in list" :key="item.id" @click="selectAddress(index)">
				<view class="item-checkbox">
					<uni-icons type="checkbox" size="23" :style="'margin-right: 5rpx;color:' + (activeIndex == index ? '#3bb061' : '')"></uni-icons>
				</view>
				<view class="item-info">
					<view class="size-30">{{ item.name }} <text class="ml-30 gray-2">{{ item.mobile }}</text></view>
					<view class="gray-9">{{ item.address }}{{ item.addressdesc }}</view>
				</view>
			</view>
			<view class="item" @click="addAddress">
				<view class="item-info">
					<view class="size-30">添加收货地址</view>
				</view>
			</view>
		</view>
		<view class="container" v-if="list.length == 0 || show">
			<view class="input-item">
				<view class="form-item">
					<input class="input-box" v-model="addr.name" type="text" name="name" placeholder="请输入收货人姓名"
						maxlength="8">
				</view>
			</view>
			<view class="input-item">
				<view class="form-item">
					<input class="input-box" v-model="addr.mobile" type="number" name="phone" maxlength="11"
						placeholder="手机号码">
				</view>
			</view>
			<view class="input-item">
				<view class="address-wrap" @click="showPCA">
					<view class="address-item">
						{{addr.province}}
					</view>
					<view class="address-item">
						{{addr.city}}
					</view>
					<view class="address-item">
						{{addr.district}}
					</view>
				</view>
				<pcaPicker ref="pcaPicker" @confirm="getPCA"></pcaPicker>
			</view>
			<view class="input-item">
				<view class="form-item">
					<input class="input-box" v-model="addr.addressdesc" type="text" name="addressdesc" placeholder="小区门牌等详细信息">
				</view>
			</view>
			<view class="tips">
				*您提交的信息将加密发送
			</view>
		</view>
		<view class="determine" @click="submit">
			提交订单
		</view>
	</view>
</template>

<script>
	import util from "@/common/util.js"
	export default {
		name: "sel-address",
		data() {
			return {
				addr: {
					id: 0,
					name: "",
					mobile: "",
					addressdesc: "",
					province: "请选择",
					city: "请选择",
					district: "请选择",
					address: ""
				},
				activeIndex: 0,
				show: false
			};
		},
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		methods: {
			submit() {
				let addr = this.list[this.activeIndex] || this.addr;
				if(addr.id > 0){
					//添加积分商城订单
				} else {
					//添加收货地址后添加订单
					if (addr.name == "" || addr.name.length < 2) {
						uni.showToast({
							title: "请填写姓名",
							icon: "none"
						})
						return;
					}
					if (addr.mobile == "") {
						uni.showToast({
							title: "请填写正确的手机号",
							icon: "none"
						})
						return;
					}
					if (!util.checkPhone(addr.mobile)) {
						uni.showToast({
							title: "请填写正确的手机号",
							icon: "none"
						})
						return;
					}
					if (addr.city == "") {
						uni.showToast({
							title: "请选择收货地区",
							icon: "none"
						})
						return;
					}
					if (addr.addressdesc == "") {
						uni.showToast({
							title: "请填写详细地址",
							icon: "none"
						})
						return;
					}
				}
			},
			showPCA(e) {
				this.$refs.pcaPicker.show();
			},
			getPCA(e) {
				this.addr.province = e.province
				this.addr.city = e.city
				this.addr.district = e.district
			},
			selectAddress(index){
				this.activeIndex = index
				this.show = false
			},
			addAddress(){
				this.activeIndex = this.list.length;
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-wrapper {
		.remind-choose {
			width: 100%;
			margin: 40rpx auto 0;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			padding-bottom: 10rpx;
		}

		.determine {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			background-color: $theme-color;
			text-align: center;
			border-radius: 5rpx;
			font-size: $uni-font-size-base;
		}

		.input-item,
		.address-wrap {
			width: 100%;
			height: 120rpx;
			border-bottom: 1px solid #d7d7d7;
			border-radius: 5rpx;

			.input-box {
				width: 100%;
				height: 120rpx;
				font-size: $uni-font-size-base;
			}

			.address-wrap {
				display: flex;
				align-items: center;
				font-size: $uni-font-size-base;

				.address-item {
					flex: 1;
					padding: 0 30rpx;
					position: relative;
					display: flex;
					align-items: center;

					&:before {
						content: "";
						position: absolute;
						right: 30rpx;
						width: 18rpx;
						height: 18rpx;
						background-image: url();
						background-repeat: no-repeat;
						background-size: 100% auto;
					}
				}
			}
		}

		.tips {
			width: 100%;
			height: 25rpx;
			margin: 60rpx auto 30rpx;
			font-size: $uni-font-size-sm;
			color: $theme-color;
		}
		.check1{
			color: $theme-color;
		}
		.address-list {
			.item {
				display: flex;
				justify-content:flex-start;
				align-items: center;
				padding: 20upx;
				margin:20upx 0;
				box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .1);
				.item-checkbox{
					width: 60upx;
				}
				.item-info{
					
				}
			}
		}
	}
</style>